<template>
  <view class="common-class">
    <view class="bar-sticky">
      <navigationBar
        :navigationBarStyle="navigationBarStyle"
        :showBack="false"
      ></navigationBar>
    </view>
    <view class="topic">
      <view class="concern">
        <view
          class="item"
          v-for="(v, i) in topicList"
          :key="v.id"
          @click="HandleView(v.id)"
        >
          <view class="nav-item">
            <view
              class="cover br10"
              :style="{ backgroundImage: 'url(' + v.cover + ')' }"
            >
            </view>
            <view class="info">
              <view class="title t2">
                {{ v.title }}
              </view>
              <view class="intro t2">
                {{ v.content }}
              </view>
              <view class="flex-between view-time">
                <view class="view-num"> {{ v.view_num }}阅读 </view>
                <view class="time">
                  {{ v.create_at }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <u-back-top
        :scrollTop="scrollTop"
        bottom="40"
        :custom-style="{ background: 'transparent' }"
      >
        <view class="back-top-image">
          <image src="/static/icon/icon-back-top.png" mode="widthFix"></image>
        </view>
      </u-back-top>
      <ALoading v-show="aloading"></ALoading>
      <view :class="{ mask: aloading }" :catchtouchmove="aloading"></view>
      <view class="no-more">
        <u-loadmore :status="status" font-size="24" :load-text="loadText" />
      </view>
      <u-no-network></u-no-network>
    </view>
  </view>
</template>

<script>
import navigationBar from "../../components/navigationBar/navigationBar.vue"
import ALoading from "../../components/loading/loading.vue"
export default {
  components: { navigationBar, ALoading },
  data() {
    return {
      navigationBarStyle: {
        background: "#8486f8",
        iconText: "专题", //导航栏文字
      },
      topicList: [],
      aloading: true,
      isGet: false,
      pages: 1, //页码
      pageSize: 5, //每页条数
      dataCount: 0, //总条数
      loadText: {
        loadmore: "轻轻上拉",
        loading: "努力加载中",
        nomore: "我也是有底线的",
      },
      scrollTop: 0,
    }
  },
  onLoad() {
    this.getTopicList()
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
  },
  onPullDownRefresh() {
    this.getTopicList()
    uni.stopPullDownRefresh()
  },
  onReachBottom() {
    // 判断条件  页码 * 每页条数 < 总条数
    var isGet = (this.pages - 1) * this.pageSize < this.dataCount
    if (isGet) {
      // 触发数据加载
      this.getTopicList("nextpage")
    }
  },
  methods: {
    getTopicList(type) {
      let _self = this
      _self.status = "loading"
      if (type != "nextpage") {
        _self.pages = 1
        _self.topicList = []
      }
      let data = {
        page_index: _self.pages++,
        page_size: _self.pageSize,
        status: 1,
      }
      _self.$store.dispatch("topic/list", data).then(res => {
        // _self.articleAllList = res.data
        if (type == "nextpage") {
          _self.topicList = _self.topicList.concat(res.data)
        } else {
          _self.topicList = res.data
        }
        _self.dataCount = res.data_count
        _self.status = "nomore"
        _self.aloading = false
      })
    },
    HandleView(id) {
      uni.navigateTo({
        url: "./detail/detail?id=" + id,
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>
